﻿<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>SAEA.MVCTest</title>
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
        }

        div, form {
            margin: 5px;
        }

        form {
            background-color: #aaa;
            padding: 5px;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div style="position:absolute;z-index:-1;opacity:0.1;">
        <canvas id="canvas" width="1903" height="404"></canvas>
    </div>
    <div>
        <img src="/Content/Images/6139455.png" />
        <img src="/File/Download" />
        <img src="/File/DownloadBigData" />
        <img src="/File/GetPic" />
    </div>

    <p>
        form get
    </p>
    <form action="/home/update" method="get">
        <p>id: <input type="text" name="id" /></p>
        <input type="submit" value="Submit" />
    </form>
    <p>
        form post
    </p>
    <form action="/home/Update1" method="post">
        <p>ID: <input type="text" name="ID" /></p>
        <p>UserName: <input type="text" name="UserName" /></p>
        <input type="submit" value="Submit" />
    </form>

    <p>
        form post2
    </p>
    <form action="/home/update2" method="post">
        <p>int: <input type="text" name="roleType" /></p>
        <p>int: <input type="text" name="roleID" /></p>
        <input type="submit" value="Submit" />
    </form>

    <p>
        form file
    </p>
    <form action="/File/upload" method="post" enctype="multipart/form-data">
        <p>name: <input type="text" name="name" /></p>
        <p>name: <textarea name="name2"></textarea></p>
        <p>File1: <input type="file" name="File1" /></p>
        <input type="submit" value="Submit" />
    </form>
    <p>
        form plain
    </p>
    <form action="/test/other" method="post" enctype="text/plain">
        <p>ID: <input type="text" name="ID" /></p>
        <p>UserName: <input type="text" name="UserName" /></p>
        <input type="submit" value="Submit" />
    </form>
    <p>
        form json
    </p>

    <form action="/test/other" method="post" enctype="application/json">
        <p>ID: <input type="text" name="ID" /></p>
        <p>UserName: <input type="text" name="UserName" value='{"asdfe":"bafeaf","#@!$%^%$%^&**&()(__":"!@#$#%#%$^* *(*(*)0_+_+_==857","ccc":"1111"}' /></p>
        <input type="submit" value="Submit" />
    </form>

    <div>
        <p>
            <button id="ajax_btn">ajaxTest--url get</button>

            <button id="ajax_btn1">ajaxTest--form get</button>

            <button id="ajax_btn2">ajaxTest2--form post</button>

            <button id="ajax_btn3">ajaxTest3--json</button>

            <button id="ajax_btn4">ajaxTest4--json</button>

            <button id="noAjax_btn" onclick="location.href = '/ajax/test?str=hello';">noajaxTest</button>
        </p>
    </div>

    <div>
        <a href="eventstream.html" target="_blank">
            服务器发送事件(Server-Sent Events)测试
        </a>

    </div>

    <a href="sdktest.html">APISdkCodeGenerator 生成SDK代码测试页</a>

    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#ajax_btn").click(function () {
                $.get("/ajax/test?str=hello", null, function (data) {
                    alert(data);
                });
            });

            $("#ajax_btn1").click(function () {
                $.get("/ajax/test", "str=hello", function (data) {
                    alert(data);
                });
            });

            $("#ajax_btn2").click(function () {
                $.post("/ajax/test2", "str=hello", function (data) {
                    alert(data);
                });
            });

            var json = { "id": "007", "userName": "yswenli", "nickName": "WaLLE&@#$ %$=-090-=+)_(89~!@@!`123" };

            $("#ajax_btn3").click(function () {
                $.ajax({
                    url: "/ajax/test3",
                    type: "POST",
                    dataType: "JSON",
                    contentType: "application/json",
                    data: JSON.stringify(json),
                    async: false,
                    success: function (result) {
                        alert(`id:${result.ID},username:${result.UserName},nickname:${result.NickName}`);
                    }
                });
            });
            $("#ajax_btn4").click(function () {
                $.ajax({
                    url: "/ajax/test4",
                    type: "POST",
                    dataType: "JSON",
                    contentType: "application/json",
                    data: JSON.stringify(json),
                    async: false,
                    success: function (result) {
                        alert(result);
                    }
                });
            });
        });

    </script>
    <script>
        function project3D(x, y, z, vars) { var p, d; x -= vars.camX; y -= vars.camY - 8; z -= vars.camZ; p = Math.atan2(x, z); d = Math.sqrt(x * x + z * z); x = Math.sin(p - vars.yaw) * d; z = Math.cos(p - vars.yaw) * d; p = Math.atan2(y, z); d = Math.sqrt(y * y + z * z); y = Math.sin(p - vars.pitch) * d; z = Math.cos(p - vars.pitch) * d; var rx1 = -1000; var ry1 = 1; var rx2 = 1000; var ry2 = 1; var rx3 = 0; var ry3 = 0; var rx4 = x; var ry4 = z; var uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1); var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc; var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc; if (!z) z = 0.000000001; if (ua > 0 && ua < 1 && ub > 0 && ub < 1) { return { x: vars.cx + (rx1 + ua * (rx2 - rx1)) * vars.scale, y: vars.cy + y / z * vars.scale, d: (x * x + y * y + z * z) } } else { return { d: -1 } } } function elevation(x, y, z) { var dist = Math.sqrt(x * x + y * y + z * z); if (dist && z / dist >= -1 && z / dist <= 1) return Math.acos(z / dist); return 0.00000001 } function rgb(col) { col += 0.000001; var r = parseInt((0.5 + Math.sin(col) * 0.5) * 16); var g = parseInt((0.5 + Math.cos(col) * 0.5) * 16); var b = parseInt((0.5 - Math.sin(col) * 0.5) * 16); return "#" + r.toString(16) + g.toString(16) + b.toString(16) } function interpolateColors(RGB1, RGB2, degree) { var w2 = degree; var w1 = 1 - w2; return [w1 * RGB1[0] + w2 * RGB2[0], w1 * RGB1[1] + w2 * RGB2[1], w1 * RGB1[2] + w2 * RGB2[2]] } function rgbArray(col) { col += 0.000001; var r = parseInt((0.5 + Math.sin(col) * 0.5) * 256); var g = parseInt((0.5 + Math.cos(col) * 0.5) * 256); var b = parseInt((0.5 - Math.sin(col) * 0.5) * 256); return [r, g, b] } function colorString(arr) { var r = parseInt(arr[0]); var g = parseInt(arr[1]); var b = parseInt(arr[2]); return "#" + ("0" + r.toString(16)).slice(-2) + ("0" + g.toString(16)).slice(-2) + ("0" + b.toString(16)).slice(-2) } function process(vars) { if (vars.points.length < vars.initParticles) for (var i = 0; i < 5; ++i)spawnParticle(vars); var p, d, t; p = Math.atan2(vars.camX, vars.camZ); d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ); d -= Math.sin(vars.frameNo / 80) / 25; t = Math.cos(vars.frameNo / 300) / 165; vars.camX = Math.sin(p + t) * d; vars.camZ = Math.cos(p + t) * d; vars.camY = -Math.sin(vars.frameNo / 220) * 15; vars.yaw = Math.PI + p + t; vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2; var t; for (var i = 0; i < vars.points.length; ++i) { x = vars.points[i].x; y = vars.points[i].y; z = vars.points[i].z; d = Math.sqrt(x * x + z * z) / 1.0075; t = .1 / (1 + d * d / 5); p = Math.atan2(x, z) + t; vars.points[i].x = Math.sin(p) * d; vars.points[i].z = Math.cos(p) * d; vars.points[i].y += vars.points[i].vy * t * ((Math.sqrt(vars.distributionRadius) - d) * 2); if (vars.points[i].y > vars.vortexHeight / 2 || d < .25) { vars.points.splice(i, 1); spawnParticle(vars) } } } function drawFloor(vars) { var x, y, z, d, point, a; for (var i = -25; i <= 25; i += 1) { for (var j = -25; j <= 25; j += 1) { x = i * 2; z = j * 2; y = vars.floor; d = Math.sqrt(x * x + z * z); point = project3D(x, y - d * d / 85, z, vars); if (point.d != -1) { size = 1 + 15000 / (1 + point.d); a = 0.15 - Math.pow(d / 50, 4) * 0.15; if (a > 0) { vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d / 26 - vars.frameNo / 40), [0, 128, 32], .5 + Math.sin(d / 6 - vars.frameNo / 8) / 2)); vars.ctx.globalAlpha = a; vars.ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size) } } } } vars.ctx.fillStyle = "#82f"; for (var i = -25; i <= 25; i += 1) { for (var j = -25; j <= 25; j += 1) { x = i * 2; z = j * 2; y = -vars.floor; d = Math.sqrt(x * x + z * z); point = project3D(x, y + d * d / 85, z, vars); if (point.d != -1) { size = 1 + 15000 / (1 + point.d); a = 0.15 - Math.pow(d / 50, 4) * 0.15; if (a > 0) { vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d / 26 - vars.frameNo / 40), [32, 0, 128], .5 + Math.sin(-d / 6 - vars.frameNo / 8) / 2)); vars.ctx.globalAlpha = a; vars.ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size) } } } } } function sortFunction(a, b) { return b.dist - a.dist } function draw(vars) { vars.ctx.globalAlpha = .15; vars.ctx.fillStyle = "#000"; vars.ctx.fillRect(0, 0, canvas.width, canvas.height); drawFloor(vars); var point, x, y, z, a; for (var i = 0; i < vars.points.length; ++i) { x = vars.points[i].x; y = vars.points[i].y; z = vars.points[i].z; point = project3D(x, y, z, vars); if (point.d != -1) { vars.points[i].dist = point.d; size = 1 + vars.points[i].radius / (1 + point.d); d = Math.abs(vars.points[i].y); a = .8 - Math.pow(d / (vars.vortexHeight / 2), 1000) * .8; vars.ctx.globalAlpha = a >= 0 && a <= 1 ? a : 0; vars.ctx.fillStyle = rgb(vars.points[i].color); if (point.x > -1 && point.x < vars.canvas.width && point.y > -1 && point.y < vars.canvas.height) vars.ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size) } } vars.points.sort(sortFunction) } function spawnParticle(vars) { var p, ls; pt = {}; p = Math.PI * 2 * Math.random(); ls = Math.sqrt(Math.random() * vars.distributionRadius); pt.x = Math.sin(p) * ls; pt.y = -vars.vortexHeight / 2; pt.vy = vars.initV / 20 + Math.random() * vars.initV; pt.z = Math.cos(p) * ls; pt.radius = 200 + 800 * Math.random(); pt.color = pt.radius / 1000 + vars.frameNo / 250; vars.points.push(pt) } function frame(vars) { if (vars === undefined) { var vars = {}; vars.canvas = document.querySelector("canvas"); vars.ctx = vars.canvas.getContext("2d"); vars.canvas.width = document.body.clientWidth; vars.canvas.height = document.body.clientHeight; window.addEventListener("resize", function () { vars.canvas.width = document.body.clientWidth; vars.canvas.height = document.body.clientHeight; vars.cx = vars.canvas.width / 2; vars.cy = vars.canvas.height / 2 }, true); vars.frameNo = 0; vars.camX = 0; vars.camY = 0; vars.camZ = -14; vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2; vars.yaw = 0; vars.cx = vars.canvas.width / 2; vars.cy = vars.canvas.height / 2; vars.bounding = 10; vars.scale = 500; vars.floor = 26.5; vars.points = []; vars.initParticles = 1000; vars.initV = .01; vars.distributionRadius = 800; vars.vortexHeight = 25 } vars.frameNo++; requestAnimationFrame(function () { frame(vars) }); process(vars); draw(vars) } frame();
    </script>
</body>
</html>